<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>


<head>
    <title>Basic Custom Example</title>
    <script src="{{=URL('static','adminlte/plugins/wizard/jquery-latest.js')}}"></script>
{{include 'pages/base/layout.html'}}
    <!-- custom styles -->
    <link href="{{=URL('static','adminlte/plugins/wizard/custom.css')}}" rel="stylesheet">
    <link href="{{=URL('static','adminlte/plugins/wizard/prettify.css')}}" rel="stylesheet">
    <script src="{{=URL('static','adminlte/plugins/wizard/jquery.bootstrap.wizard.js')}}"></script>
    <script src="{{=URL('static','adminlte/plugins/wizard/prettify.js')}}"></script>


    <script src="{{=URL('static','adminlte/plugins/datepicker/bootstrap-datepicker.js')}}"></script>
    <script src="{{=URL('static','adminlte/plugins/datepicker/locales/bootstrap-datepicker.zh-CN.js')}}"></script>
    <link rel="stylesheet" href="{{=URL('static','adminlte/plugins/datepicker/datepicker3.css')}}">


    <link rel="stylesheet" href="{{=URL('static','adminlte/plugins/bootstrap-table/bootstrap-table.css')}}"/>
    <link rel="stylesheet" href="{{=URL('static','adminlte/plugins/bootstrap3-editable/css/bootstrap-editable.css')}}"/>
    <script src="{{=URL('static','adminlte/plugins/bootstrap-table/bootstrap-table.js')}}"></script>
    <script src="{{=URL('static','adminlte/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.js')}}"></script>
    <script src="{{=URL('static','adminlte/plugins/bootstrap-table/extensions/editable/bootstrap-table-editable.js')}}"></script>
    <script src="{{=URL('static','adminlte/plugins/bootstrap3-editable/js/bootstrap-editable.js')}}"></script>

    <script src="{{=URL('static','adminlte/plugins/highcharts/highcharts.js')}}"></script>

</head>

<script>
//    function getId(url) {
//        url = url.split('?')[1].split('&');
//        for (var i = 0; i < url.length; i++) {
//            ir(url[i].substr(0, 2) == 'id')
//            {
//                return url[i].split('=')[1];
//            }
//        }
//        return undefined;
//    }
var g_policy_name
var g_policy_id
    $(document).ready(function () {
        g_policy_name = "{{=policy_name}}"
        if(g_policy_name != 'None'){
            $("#name").val(g_policy_name)
            g_policy_id = "{{=policy_id}}"
        }

        $('#rootwizard').bootstrapWizard({
            'tabClass': 'bwizard-steps',
            onTabClick: function (tab, navigation, index, clickedIndex, clickedTab) {
                if (Math.abs(index - clickedIndex) < 2) {
                    if (clickedIndex - index == 1)
                        return this.onNext(tab, navigation, clickedIndex);
                    return true;
                }
                return false;
            },
            onNext: function (tab, navigation, index) {
                if (index == 1) {
                    if(!$('#name').val()) {
                        alert('策略名称必须输入！');
                        $('#name').focus();
                        return false;
                    }

                    if(g_policy_name == 'None'){
                        $.ajax({
                        type: 'POST',
                        async: false,
                        dataType: "json",
                        url: '{{=URL('alpha_main_v2','create_policy')}}',
                        data: {
                            'policy_name': $('#name').val()
                        },
                        success: function (data) {
                            if (data.status == "error") {
                                status = data.status
                                alert(data.msg)
                            } else {
                                g_policy_id = data.policy_id
                            }
                        }
                    });
                    }

                }
                if (index == 2) {
//                    alert(22222222)

                    parent.$("#loading").show();
                    var status = "";
                    var ztree = document.getElementById("treeDemo").contentWindow.Tree2;
                    var node = ztree.getNodes();
                    var nodes = ztree.transformToArray(node);
                    var factors = [];
                    var factorstpye = [];
                    var factorsnum = 0;
                    for (var j = 0; j < nodes.length; j++) {
                        if (!nodes[j].isParent) {
                            factors[factorsnum] = nodes[j].name
                            factorstpye[factorsnum] = nodes[j].getParentNode().name
                            factorsnum++
                        }
                    }

                    var step2chk=[];  //定义一个数组
                    $('input[name="step2chk"]:checked').each(function(){//遍历每一个名字为nodes的复选框，其中选中的执行函数
                        step2chk.push($(this).val());//向数组中添加元素
                    });

                    $.ajax({
                        type: 'POST',
                        async: false,
                        dataType: "json",
                        url: '{{=URL('alpha_main_v2','test_valid')}}',
                        data: {
                            'policy_id': g_policy_id,
                            'policy_name': $("#name").val(),
                            'factors': factors,
                            'factorstpye': factorstpye,
                            'step2_stockpool':  $('#step2_stockpool option:selected').val(),
                            'step2chk': step2chk,
                            'begindate': $("#beginDatepicker").val(),
                            'enddate': $("#endDatepicker").val()
                        },
                        success: function (data) {
                            parent.$("#loading").hide();
                            if (data.status == "error") {
                                status = data.status
                                alert(data.msg)
                            }
                            $('#home').html(data.table)
                            $('#industryfac').html(data.tableIndustry)

                            //1.初始化Table
                            var oTable = new TableInit();
                            oTable.Init();
                             var oTableIndustry = new TableInitIndustry();
                            oTableIndustry.Init();
                        }
                    });
                    if (status == "error") {
                        return false;
                    }

                }
                if (index == 3) {
//                    alert(33333333)
                    parent.$("#loading").show();
                    var fdata = []
                    var industry_fdata = []

                    var datatable = $('#tb_departments').bootstrapTable('getData')
                    for (var i = 0; i < datatable.length; i++) {
                        fdata[i] = datatable[i].l
                    }
                    var datatable1 = $('#tb_TableInitIndustry').bootstrapTable('getData')
                    for (var i = 0; i < datatable1.length; i++) {
                        industry_fdata[i] = datatable1[i].l
                    }
                    $.ajax({
                        type: 'POST',
                        async: false,
                        url: '{{=URL('alpha_main_v2','get_valid_factor')}}',
                        data: {
                            'fdata': fdata,
                            'policy_name': $('#name').val(),
                            'industry_fdata': industry_fdata
                        },
                        success: function (data) {
                            parent.$("#loading").hide();
                        }
                    });
                }
                if (index == 4) {
//                    alert(44444444)

                    var status = "";
                    $.ajax({
                        type: 'POST',
                        async: false,
                        url: '{{=URL('alpha_main_v2','construct_model')}}',
                        data: {
                            'earningsforecast': $('#teb4earningsforecast option:selected').val(),
                             'policy_name': $('#name').val(),
                             'policy_id': g_policy_id,
                            'var_half_life': $("#tab4var_half_life").val(),
                            'cov_half_life': $("#tab4cov_half_life").val(),
                            'err_half_life': $("#tab4err_half_life").val(),
                            'begindate': $("#beginDatepicker").val(),
                            'enddate': $("#endDatepicker").val()
                        },
                        success: function (data) {
                            parent.$("#loading").hide();
                            if (data.status == "error") {
                                status = data.status
                                alert(data.msg)
                            }
                            $('#tab5home').html(data.table)
//                            $('#tab5industryfac').html(data.tableIndustry)
                            $('#tab5factors_grids').html(data.tableFactorsGrids)

                            var oTableFactorsGrids = new TableFactorsGrids();
                            oTableFactorsGrids.Init();

                            $('#tab5comb_income').highcharts(data.xchar)
                            $('#tab5home').highcharts(data.tchar);
//                            $('#tab5industryfac').highcharts(data.industrytchar);

                        }
                    });
                    if (status == "error") {
                        return false;
                    }
                }
                if (index == 5) {
//                    alert(555555555)
                    var status = false
                    var datatable = $('#tb_factors_grids').bootstrapTable('getData')
                    for (var i = 0; i < datatable.length; i++) {
//                      {value: "1", text: "阿尔法因子"}, {value: "2", text: "风险因子"}
                        if (datatable[i].l == '1'){
                            status = true
                        }
                    }

                    if (status == false) {
                        alert('阿尔法因子数量不能为零')
                        return status;
                    }

                    var alpah_limit = new Array();
                    for (var i = 0; i < datatable.length; i++) {
                        if (datatable[i].l == '1'){
                            alpah_limit.push(datatable[i].name)
                        }
                    }

                    $.ajax({
                        type: 'POST',
                        async: false,
                        url: '{{=URL('alpha_main_v2','create_alpha_limit_grid')}}',
                        data: {
                            'policy_id': g_policy_id,
                            'alpha_limit':  JSON.stringify(alpah_limit)
                        },
                        success: function (data) {
                        }
                    });

                }

            },
            onTabShow: function (tab, navigation, index) {
                var $total = navigation.find('li').length;
                var $current = index + 1;
                var $percent = ($current / $total) * 100;
                $('#rootwizard .progress-bar').css({width: $percent + '%'});
            }


        });

        $('#rootwizard .limit_grid').click(function () {
            var alpha_limit_url = "{{=URL('alpha','alpha_limit')}}"
            alpha_limit_url = alpha_limit_url + '?policy_id='+g_policy_id
            var path = '<iframe  src=\''+ alpha_limit_url + '\' width="90%" height="400px" frameborder="0"></iframe>'
            parent.$("#lgModal").find(".modal-dialog").attr("class", "modal-dialog modal-lg");
            parent.$("#lgModal").find(".modal-body").html(path).end().modal("show");
        });

        $('#rootwizard .finish').click(function () {
            var datatable = $('#tb_factors_grids').bootstrapTable('getData')
            var jsonData = {};
            for (var i = 0; i < datatable.length; i++) {
//                      {value: "1", text: "阿尔法因子"}, {value: "2", text: "风险因子"}
                jsonData[datatable[i].name] = datatable[i].l
            }

            $('#teb5stockpool').val($('#teb4stockpool option:selected').text())
            $('#teb5market').val($('#teb4market option:selected').text())
            $('#tab5trackerror').val($('#tab4trackerror option:selected').text())
            $('#tab5hedgingfunc').val($('#tab4hedgingfunc option:selected').text())
//                    $('#teb5market').val($('#teb4market').val())
            parent.$("#loading").show();
            $.ajax({
                type: 'POST',
                async: false,
                url: '{{=URL('alpha_main_v2','construct_comb')}}',
                data: {
                    'pid': $('#teb4stockpool option:selected').val(),
                    'fdata': JSON.stringify(jsonData),
                    'policy_name': $('#name').val(),
                    'policy_id': g_policy_id,
                    'majorizfunc':  $('#step6_majorizfunc option:selected').val(),
                    'begindate': $("#beginDatepicker").val(),
                    'enddate': $("#endDatepicker").val()
                },
                success: function (data) {
                    parent.$("#loading").hide();
                    if (data.status == "error") {
//                        status = data.status
                        alert(data.msg)
                        return false;
                    }
                    window.location.href="{{=URL('alpha','policy_list')}}"
                }
            });
        });

        $("#beginDatepicker").datepicker({language: 'zh-CN', format: 'yyyy-mm-dd'}).datepicker('setDate', '2014-01-01');
        $("#endDatepicker").datepicker({language: 'zh-CN', format: 'yyyy-mm-dd'}).datepicker('setDate', '2014-04-31');
    });


    function sleep(numberMillis) {
        var now = new Date();
        var exitTime = now.getTime() + numberMillis;
        while (true) {
            now = new Date();
            if (now.getTime() > exitTime)

                return;
        }
    }


    var TableInit = function () {
        var oTableInit = new Object();
        //初始化Table
        oTableInit.Init = function () {
            $('#tb_departments').bootstrapTable({
                url: '{{=URL('alpha_main_v2','gettabledata')}}', //请求后台的URL（*）
                method: 'get', //请求方式（*）
                toolbar: '#toolbar', //工具按钮用哪个容器
                striped: true, //是否显示行间隔色
                cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: false, //是否显示分页（*）
                sortable: true, //是否启用排序
                sortOrder: "desc", //排序方式
                sortName:"t2",
                sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
                pageNumber: 1, //初始化加载第一页，默认第一页
                pageSize: 5, //每页的记录行数（*）
                pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
                search: false, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
                strictSearch: false,
                showColumns: false, //是否显示所有的列
                showRefresh: false, //是否显示刷新按钮
//                minimumCountColumns: 2, //最少允许的列数
                clickToSelect: false, //是否启用点击选中行
                //height: 500, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                uniqueId: "id", //每一行的唯一标识，一般为主键列
                showToggle: false, //是否显示详细视图和列表视图的切换按钮
                cardView: false, //是否显示详细视图
                detailView: false, //是否显示父子表
                queryParams: function getParams(params) {
                    var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                            sortOrder: params.order,//排序
                            sortName:params.sort//排序字段
                    };
                    console.log(temp)
                   return temp;
                },
                columns: [{
                    field: 'name',
                    title: 'Factor Name'
                }, {
                    field: 't',
                    title: 't-stat',
                    sortable : true
                }, {
                    field: 't2',
                    title: '|t|>2',
                    sortable : true
                }, {
                    field: 'r',
                    title: 'Return',
                    sortable : true
                }, {
                    field: 'v',
                    title: 'Volatility',
                    sortable : true
                }, {
                    field: 's',
                    title: 'Sharpraio',
                    sortable : true
                }, {
                    field: 'c',
                    title: 'Correl',
                    sortable : true
                }, {
                    field: 'vif',
                    title: 'VIF',
                    sortable : true
                }, {
                    field: 'l',
                    title: '因子类别',
                    editable: {
                        type: 'select',
                        title: '因子类别',
                        source: [{value: "1", text: "有效因子"}, {value: "0", text: "无效因子"}]
                    }
                }]
            });
        };
        return oTableInit;
    };

    var TableInitIndustry = function () {
        var oTableInit = new Object();
        //初始化Table
        oTableInit.Init = function () {
            $('#tb_TableInitIndustry').bootstrapTable({
                url: '{{=URL('alpha_main_v2','gettableIndustrydata')}}', //请求后台的URL（*）
                method: 'get', //请求方式（*）
                toolbar: '#toolbar', //工具按钮用哪个容器
                striped: true, //是否显示行间隔色
                cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: false, //是否显示分页（*）
                sortable: true, //是否启用排序
                sortOrder: "desc", //排序方式
                sortName:"t2",
                sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
                pageNumber: 1, //初始化加载第一页，默认第一页
                pageSize: 5, //每页的记录行数（*）
                pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
                search: false, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
                strictSearch: false,
                showColumns: false, //是否显示所有的列
                showRefresh: false, //是否显示刷新按钮
//                minimumCountColumns: 2, //最少允许的列数
                clickToSelect: false, //是否启用点击选中行
                //height: 500, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                uniqueId: "id", //每一行的唯一标识，一般为主键列
                showToggle: false, //是否显示详细视图和列表视图的切换按钮
                cardView: false, //是否显示详细视图
                detailView: false, //是否显示父子表
                queryParams: function getParams(params) {
                    var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                            sortOrder: params.order,//排序
                            sortName:params.sort//排序字段
                    };
                    console.log(temp)
                   return temp;
                },
                columns: [{
                    field: 'name',
                    title: 'Factor Name'
                }, {
                    field: 't',
                    title: 't-stat',
                    sortable : true
                }, {
                    field: 't2',
                    title: '|t|>2',
                    sortable : true
                }, {
                    field: 'r',
                    title: 'Return',
                    sortable : true
                }, {
                    field: 'v',
                    title: 'Volatility',
                    sortable : true
                }, {
                    field: 's',
                    title: 'Sharpraio',
                    sortable : true
                }, {
                    field: 'l',
                    title: '因子类别',
                    editable: {
                        type: 'select',
                        title: '因子类别',
                        source: [{value: "1", text: "有效因子"}, {value: "0", text: "无效因子"}]
                    }
                }]
            });
        };
        return oTableInit;
    };

    var TableFactorsGrids = function () {
        var oTableInit = new Object();
        //初始化Table
        oTableInit.Init = function () {
            $('#tb_factors_grids').bootstrapTable({
                url: '{{=URL('alpha_main_v2','get_factor_list')}}', //请求后台的URL（*）
                method: 'get', //请求方式（*）
                toolbar: '#toolbar', //工具按钮用哪个容器
                striped: true, //是否显示行间隔色
                cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: false, //是否显示分页（*）
                sortable: true, //是否启用排序
                sortOrder: "desc", //排序方式
                sortName:"max_drawdown",
                sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
                pageNumber: 1, //初始化加载第一页，默认第一页
                pageSize: 5, //每页的记录行数（*）
                pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
                search: false, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
                strictSearch: false,
                showColumns: false, //是否显示所有的列
                showRefresh: false, //是否显示刷新按钮
//                minimumCountColumns: 2, //最少允许的列数
                clickToSelect: false, //是否启用点击选中行
                //height: 500, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                uniqueId: "id", //每一行的唯一标识，一般为主键列
                showToggle: false, //是否显示详细视图和列表视图的切换按钮
                cardView: false, //是否显示详细视图
                detailView: false, //是否显示父子表
                queryParams: function getParams(params) {
                    var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                            policy_id:g_policy_id,
                            sortOrder: params.order,//排序
                            sortName:params.sort//排序字段
                    };
                    console.log(temp)
                   return temp;
                },
                columns: [{
                    field: 'name',
                    title: 'Factor Name'
                }, {
                    field: 'annualized_year',
                    title: '策略年化收益',
                    sortable : true
                }, {
                    field: 'algor_volat',
                    title: '策略波动率',
                    sortable : true
                }, {
                    field: 'ir',
                    title: '信息比率',
                    sortable : true
                }, {
                    field: 'max_drawdown',
                    title: '最大回撤',
                    sortable : true
                }, {
                    field: 'l',
                    title: '因子类别',
                    editable: {
                        type: 'select',
                        title: '因子类别',
                        source: [{value: "1", text: "阿尔法因子"}, {value: "2", text: "风险因子"}]
                    }
                }]
            });
        };
        return oTableInit;
    };

</script>


<body>
<div class='container'>
    <section id="wizard">
        <div id="rootwizard">

            <div class="navbar">
                <div class="navbar-inner">
                    <div class="container">
                        <ul>
                            <li><a href="#tab1" data-toggle="tab"><span class="label">1</span> 策略名称</a></li>
                            <li><a href="#tab2" data-toggle="tab"><span class="label">2</span> 因子选择</a></li>
                            <li><a href="#tab3" data-toggle="tab"><span class="label">3</span> 因子有效性检验</a></li>
                            <li><a href="#tab4" data-toggle="tab"><span class="label">4</span> 收益与风险</a></li>
                            <li><a href="#tab5" data-toggle="tab"><span class="label">5</span> 模型结果</a></li>
                            <li><a href="#tab6" data-toggle="tab"><span class="label">6</span> 构建投资组合</a></li>
                        </ul>
                    </div>
                </div>
            </div>

            <div id="bar" class="progress" hidden>
                <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"
                     style="width: 0%;"></div>
            </div>
            <form class="form-horizontal" role="form">
                <div class="tab-content">
                    <div class="tab-pane" id="tab1">

                        <p class="form-control-static"></p>
                        <div class="form-group">
                            <label for="firstname" class="col-sm-2 control-label ">策略名称:</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="name" placeholder="请输入策略名称">
                            </div>
                        </div>
                        <p class="form-control-static"></p>

                    </div>
                    <div class="tab-pane" id="tab2">
                        <div class="row">
                            <div class="col-sm-6">
                                <iframe id="treeDemo" name="treeDemo" src="{{=URL('demo','treemove')}}"
                                        style=" width: 100%; height: 300px;  padding: 0;overflow-x:scroll"
                                        frameborder="0"></iframe>
                            </div>
                            <div class="col-sm-6">
                                <div class="form-group">
                                    <label class="col-sm-3 control-label ">股票池:</label>
                                    <div class="col-sm-9">
                                        <select class="form-control" id="step2_stockpool">
                                        {{for row in stockpool_dict:}}
                                            <option value="{{=row.enumvalue}}">{{=row.enumlabel}}</option>
                                        {{pass}};
                                        </select>
                                    </div>

                                </div>
                                <div class="form-group">
                                    <div class="col-sm-offset-3 col-sm-9">
                                        <div class="checkbox">
                                            <label><input type="checkbox" name="step2chk" value="ST股票">ST股票</label>
                                        </div>
                                        <div class="checkbox">
                                            <label><input type="checkbox" name="step2chk" value="停盘">停盘</label>
                                        </div>
                                        <div class="checkbox">
                                            <label><input type="checkbox" name="step2chk" value="退市">退市</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-sm-offset-1 col-sm-10">
                                        <label for="selectdate">数据日期选择：</label>
                                    </div>


                                    <label for="firstname"
                                           class="col-sm-offset-1  col-sm-3 control-label ">起始时间:</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" id="beginDatepicker">
                                    </div>
                                    <label for="firstname" class="col-sm-offset-1 col-sm-3 control-label ">结束时间:</label>
                                    <div class="col-sm-8">
                                        <input type="text" class="form-control" id="endDatepicker">
                                    </div>

                                </div>


                            </div>

                        </div>
                    </div>
                    <div class="tab-pane" id="tab3">
                        <ul id="myTab" class="nav nav-tabs">
                            <li class="active">
                                <a href="#home" data-toggle="tab">
                                    因子有效性检验
                                </a>
                            </li>
                             <li>
                                <a href="#industryfac" data-toggle="tab">
                                    行业因子有效检验
                                </a>
                            </li>
                        </ul>
                        <div id="myTabContent" class="tab-content">
                            <div class="tab-pane fade in active" id="home">
                            </div>
                            <div class="tab-pane fade" id="industryfac">
                            </div>
                        </div>
                    </div>

                    <div class="tab-pane" id="tab4">
                        <div class="btn-group-vertical">
                            <h3><span class="label label-default">风险预测</span></h3>
                        </div><hr>
                        <div class="row">
                            <div class=col-sm-12">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label " >EWMA</label>
                                    <label class="col-sm-2 control-label " >方差半衰期:</label>
                                    <div class="col-sm-2">
                                        <input type="text" class="form-control" value="90" id="tab4var_half_life">
                                    </div>
                                    <label class="col-sm-2 control-label " >协方差半衰期:</label>
                                    <div class="col-sm-2">
                                        <input type="text" class="form-control" value="480" id="tab4cov_half_life">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class=col-sm-12">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label " >误差调整</label>
                                    <label class="col-sm-2 control-label " >误差半衰期:</label>
                                    <div class="col-sm-2">
                                        <input type="text" class="form-control" value="42" id="tab4err_half_life">
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="btn-group-vertical">
                             <h3><span class="label label-default">收益预测</span></h3>
                        </div><hr>

                        <div class="row">
                            <div class=col-sm-12">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label " >收益预测方法:</label>
                                    <div class="col-sm-3">
                                        <select id="teb4earningsforecast" class="form-control">
                                        {{for row in earningsforecast_dict:}}
                                            <option value="{{=row.enumvalue}}">{{=row.enumlabel}}</option>
                                        {{pass}};
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>


                    </div>

                    <div class="tab-pane" id="tab5">
                        <ul id="tab5MyTab" class="nav nav-tabs">
                            <li class="active">
                                <a href="#tab5home" data-toggle="tab">
                                    因子预期收益
                                </a>
                            </li>
                            <li>
                                <a href="#tab5comb_income" data-toggle="tab">
                                    纯因子组合收益
                                </a>
                            </li>
                             <li>
                                <a href="#tab5factors_grids" data-toggle="tab">
                                    因子类型确定
                                </a>
                            </li>
                        </ul>
                        <div id="tab5myTabContent" class="tab-content">
                            <div class="tab-pane fade in active" id="tab5home">
                            </div>
                            <div class="tab-pane fade" id="tab5comb_income">
                                <div id="xchar" style="width: 98%; height: 98%; margin: 0 auto"></div>
                            </div>
                            <div class="tab-pane fade" id="tab5factors_grids">
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane" id="tab6">
                        <div class="row">
                            <div class=col-sm-12">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label ">股票池:</label>
                                    <div class="col-sm-3">
                                        <select id="teb4stockpool" class="form-control">
                                        {{for row in stockpool_dict:}}
                                            <option value="{{=row.enumvalue}}">{{=row.enumlabel}}</option>
                                        {{pass}};
                                        </select>
                                    </div>
                                    <div class="col-sm-7">
                                        <div class="checkbox">
                                            <label><input type="checkbox" value="">ST股票</label>
                                            <label><input type="checkbox" value="">停盘</label>
                                            <label><input type="checkbox" value="">退市</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class=col-sm-12">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label ">市场组合:</label>
                                    <div class="col-sm-3">
                                        <select id="teb4market" class="form-control">
                                        {{for row in stockpool_dict:}}
                                            <option value="{{=row.enumvalue}}">{{=row.enumlabel}}</option>
                                        {{pass}};
                                        </select>
                                    </div>
                                    <div class="col-sm-7">
                                        <div class="checkbox">
                                            <label><input type="checkbox" value="">ST股票</label>
                                            <label><input type="checkbox" value="">停盘</label>
                                            <label><input type="checkbox" value="">退市</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class=col-sm-12">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label ">交易成本:</label>
                                    <div class="col-sm-3">
                                        <select class="form-control">
                                        {{for row in transcosts_dict:}}
                                            <option value="{{=row.enumvalue}}">{{=row.enumlabel}}</option>
                                        {{pass}};
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class=col-sm-12">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label ">对冲方式:</label>
                                    <div class="col-sm-3">
                                        <select id="tab4hedgingfunc" class="form-control">
                                        {{for row in hedgingfunc_dict:}}
                                            <option value="{{=row.enumvalue}}">{{=row.enumlabel}}</option>
                                        {{pass}};
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class=col-sm-12">
                                <div class="form-group">
                                    <a class = "limit_grid" href="javascript:void(0)"><label class="col-sm-2 control-label ">优化目标函数:</label></a>
                                    <div class="col-sm-3">
                                        <select class="form-control" id="step6_majorizfunc">
                                        {{for row in majorizfunc_dict:}}
                                            <option value="{{=row.enumvalue}}">{{=row.enumlabel}}</option>
                                        {{pass}};
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class=col-sm-12">
                                <div class="form-group">
                                    <label class="col-sm-2 control-label ">控制跟踪误差:</label>
                                    <div class="col-sm-3">
                                        <select id="tab4trackerror" class="form-control">
                                        {{for row in trackerror_dict:}}
                                            <option value="{{=row.enumvalue}}">{{=row.enumlabel}}</option>
                                        {{pass}};
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>

                <ul class="pager wizard">
                    <li class="previous first" style="display:none;"><a href="#">First</a></li>
                    <li class="previous"><a href="#">上一步</a></li>
                    <li class="next last" style="display:none;"><a href="#">Last</a></li>
                    <li class="next"><a href="#">下一步</a></li>
                    <li class="finish"><a href="javascript:;">构建组合</a></li>
                </ul>

            </form>
        </div>


    </section>
</div>

</body>
</html>